<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部选择框部分 -->
      <el-card>
        <div style="display: flex;">
          <span style="width: 10%;margin-top: 10px;">部门：</span>
          <el-checkbox-group v-model="checkedDepartment" @change="change">
            <el-checkbox v-for="city in departmentList" :key="city" :label="city" style="margin-top: 10px;">{{ city }} </el-checkbox>
          </el-checkbox-group>
        </div>
        <div style=" margin-top: 20px;">
          考勤状态：
          <el-radio v-model="radio" :label="''">全部</el-radio>
          <el-radio v-for="item in holidayType" :key="item.id" v-model="radio" :label="item.id">{{ item.value }}</el-radio>
        </div>
      </el-card>
      <!-- 表格部分 -->
      <el-card style="margin-top: 40px;">
        <div>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="50"
            >
              <template #default="obj">
                {{ obj.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              width="100"
            />
            <el-table-column
              prop="workNumber"
              label="工号"
              width="100"
            />
            <el-table-column
              prop="departmentName"
              label="部门"
              width="200"
            />
            <el-table-column
              prop="mobile"
              label="手机"
              width="200"
            />
            <el-table-column
              v-for="item in day"
              :key="item"
              :label="month +'/'+ item"
              width="100"
            >
              <template #default="{row}">
                <span v-if="radio - 0===row.attendanceRecord[item-1].adtStatu||radio===''">
                  {{ row.attendanceRecord[item-1].adtStatu|attendance }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          layout="prev, pager, next"
          :page-size="pagesize.size"
          :total="total"
          @current-change="currentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
import attendance from '@/api/constant/attendance'
export default {
  filters: {
    // 用于渲染表格的出勤状态
    attendance(val) {
      return attendance.holidayType[ attendance.holidayType.findIndex(item => item.id - 0 === val)].value
    }
  },
  data() {
    return {
      departmentList: ['总裁办', '行政部', '人事部', '财务部', '技术部', '运营部', '市场部', '财务核算部', '税务管理部', '薪资管理部', 'Java研发部', 'Python研发部', 'Php研发部', '北京事业部', '上海事业部'], // 所有部门
      holidayType: [...attendance.holidayType], // 所有考勤状态
      checkedDepartment: [], // 部门的选中
      radio: '', // 考勤状态的选中
      tableData: [], // 当前页表格的数组
      Data: [], // 所有页表格的数据
      res: [], // 为了存住请求回来的数据
      month: '', // 月份
      day: '', // 这个月的天数
      pagesize: {
        page: 1,
        size: 10
      },
      total: 0 // 当前数据条数
    }
  },
  async created() {
    const res = await getAttendancesListMock()
    console.log(res)
    this.res = res
    this.Data = res
    this.tableData = res.slice(0, 10)
    this.total = res.length
    const month = String(res[0].attendanceRecord[0].day).substring(4).split('').splice(0, 2)
    month.forEach(item => {
      this.month += item
    })
    this.day = res[0].attendanceRecord.length
  },
  methods: {
    // 部门选择触发时的事件
    change() {
      // this.tableData=
      this.Data = []
      this.checkedDepartment.forEach(val => {
        this.Data = [...this.Data, ...this.res.filter(item => {
          return val === item.departmentName
        })]
      })
      if (this.checkedDepartment.length === 0) {
        this.Data = this.res
      }
      this.total = this.Data.length
      this.tableData = this.Data.slice((this.pagesize.page - 1) * 10, (this.pagesize.page) * 10)
    },
    // 分页改变触发
    currentChange(page) {
      this.pagesize.page = page
      this.tableData = this.Data.slice((this.pagesize.page - 1) * 10, (this.pagesize.page) * 10)
    }
  }
}
</script>

<style>
.box{
  width: 3000px;
}
</style>
